<!--
 * @Date         : 2023-11-21 15:01:30
 * @Description  : 资讯组件项
-->

<template>
  <view class="deco-information-item" :style="[innerStyle]" @click.stop="onClick">
    <image class="cover-image" :class="{ 'radius-full': information.isShowImage == 1 }" :src="information.imageUrl" mode="widthFix"></image>
    <view v-if="information.isShowImage != 1" class="flex flex-col px-18 py-20">
      <view class="flex font-28 font-bold text-row-2">{{ information.title }}</view>
      <view class="flex items-center justify-between mt-14">
        <view class="flex items-center">
          <image v-if="information.labelId == 1" class="source-icon" :src="useImage('/zuimei-film-oss/1.0.0/icons/new-icon.png')"></image>
          <image v-else-if="information.labelId == 2" class="source-icon" :src="useImage('/zuimei-film-oss/1.0.0/icons/notice-icon.png')"></image>
          <image v-else-if="information.labelId == 3" class="source-icon" :src="useImage('/zuimei-film-oss/1.0.0/icons/film-icon.png')"></image>
          <image v-else class="source-icon" :src="useImage('/zuimei-film-oss/1.0.0/icons/hot-icon.png')"></image>
          <text v-if="information.labelName" class="text-999 font-22 ml-5">{{ information.labelName }}</text>
        </view>
        <view class="flex items-center text-line-1" @click.stop="onClickLike">
          <zm-transition v-if="information.isLike == 1" mode="bounce" show duration="1000" :custom-style="{ display: 'flex' }">
            <zm-icon name="good-job" :color="useColor('theme')" size="32rpx"></zm-icon>
          </zm-transition>
          <zm-icon v-else name="good-job-o" size="32rpx" color="#999"></zm-icon>
          <text class="text-999 ml-4">{{ information.viewNum | formatNumberWithUnit }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import mixin from "@/decoration/mixins"
export default {
  name: "deco-information-item",
  mixins: [mixin],
  props: {
    data: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      information: {}
    }
  },
  computed: {},
  watch: {
    data: {
      handler(val) {
        this.information = val
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    onClick() {
      this.useAdJump(this.data)
    },
    async onClickLike() {
      const res = await uni.$api.information.upLike({ informationId: this.data.informationId }, { handleError: false })
      this.information.isLike = res.isLike
      this.information.viewNum = res.viewNum
      this.$forceUpdate()
    }
  }
}
</script>

<style lang="scss" scoped>
.deco-information-item {
  flex: 1;
  display: flex;
  margin-bottom: 20rpx;
  border-radius: 16rpx;
  flex-direction: column;
  background-color: #ffffff;

  .cover-image {
    width: 100%;
    border-top-left-radius: 16rpx;
    border-top-right-radius: 16rpx;
    &.radius-full {
      border-radius: 16rpx;
    }
  }

  .source-icon {
    width: 30rpx;
    height: 30rpx;
    border-radius: 50%;
  }
}
</style>
